<template>
    <div class="chart-container">
        <h3 class="title">燃料类型占比</h3>
        <div ref="chartRef" style="width: 630px; height: 300px;margin-left: 10px;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'Chart',
    data() {
        return {
            chart: null,
            chartData: [
                // { value: 12, name: 'CNG', color: '#5470c6' },
                // { value: 8, name: 'LNG', color: '#91cc75' },
                // { value: 15, name: '天然气', color: '#fac858' },
                // { value: 15, name: '柴油', color: '#ee6666' }
            ]
        };
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        }
    },
    watch: {
        data: {
            /*immediate:true,*/
            deep: true,
            handler(newValue, oldValue) {
                setTimeout(() => {
                    let dd = []
                    dd.push({ name: "柴油", value: newValue.cy, color: '#fac858' }, { name: "天然气", value: newValue.trq, color: '#ee6666' }, { name: "新能源", value: newValue.xny, color: '#91cc75' })
                    this.chartData = dd
                    this.initChart();
                    window.addEventListener('resize', this.resizeChart);
                }, 100);

            },
        },
    },
    mounted() {

    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
            window.removeEventListener('resize', this.resizeChart);
        }
    },
    methods: {
        resizeChart() {
            if (this.chart) this.chart.resize();
        },
        initChart() {
            const chartDom = this.$refs.chartRef;
            this.chart = echarts.init(chartDom);

            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    textStyle: { color: 'white' },
                    borderColor: 'transparent',
                    borderRadius: 4,
                    padding: 10
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    borderRadius: 5,
                    borderWidth: 0,
                    borderColor: 'transparent',
                    textStyle: {
                        fontSize: 14,
                        color: 'white'
                    },
                    data: this.chartData.map(item => item.name),
                    itemGap: 15,
                    itemWidth: 15,
                    itemHeight: 15
                },
                series: [
                    {
                        name: '车辆类型',
                        type: 'pie',
                        center: ['35%', '50%'],
                        radius: ['40%', '65%'],
                        avoidLabelOverlap: true, // 强制避免标签重叠
                        clockwise: true,
                        startAngle: 90,
                        itemStyle: {
                            borderRadius: 5,
                            borderWidth: 2,
                            borderColor: 'white',
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,0,0,0.2)'
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            formatter: `{b}: {c} 占比:{d}%`,
                            fontSize: 12,
                            color: 'white',
                            borderColor: 'transparent',
                            borderRadius: 4,
                            padding: [2, 4],
                            lineHeight: 20,
                            rich: { // 使用富文本标签优化显示
                                name: {
                                    width: 60, // 限制名称宽度
                                    align: 'center'
                                },
                                value: {
                                    width: 30, // 限制数值宽度
                                    align: 'center'
                                },
                                percent: {
                                    width: 40, // 限制百分比宽度
                                    align: 'center'
                                }
                            },
                            formatter: (params) => {
                                return `{name|${params.name}}:{value|${params.value}} {percent|占比:${params.percent}%}`;
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15, // 缩短第一段引导线长度
                            length2: 10, // 缩短第二段引导线长度
                            lineStyle: {
                                color: 'rgba(255,255,255,0.7)',
                                width: 1.5
                            }
                        },
                        data: this.chartData.map((item, index) => ({
                            value: item.value,
                            name: item.name,
                            itemStyle: {
                                color: item.color
                            }
                        })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 15,
                            }
                        },
                        animationType: 'scale',
                        animationDuration: 800,
                        animationEasing: 'elasticOut'
                    },
                    {
                        type: 'pie',
                        center: ['35%', '50%'],
                        radius: ['30%', '32%'],
                        itemStyle: {
                            color: 'rgba(0,0,0,0.2)',
                            shadowBlur: 5,
                        },
                        label: {
                            show: false
                        },
                        data: [{ value: 1, name: '' }]
                    }
                ]
            };

            this.chart.setOption(option);
        }
    }
};
</script>

<style scoped lang="scss">
.chart-container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.title {
    text-align: center;
    color: #333;
    font-size: 18px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
</style>